<template>
   <div class="produce-in-detail-wrap">
     <el-card>
      <div slot="header" class="card-title">
        <span>添加</span>
      </div>
      <div class="search">
        <el-select class="right-margin" clearable size="small" v-model="category" placeholder="选择商品分类">
          <el-option v-for="item in categorys" :key="item.id" :label="item.class_name" :value="item.id"></el-option>
        </el-select>
        <el-input size="small" class="search-input" clearable v-model="keyword" placeholder="输入标题关键字搜索"></el-input>
        <el-button size="small" plain type="primary" @click="search">查询</el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :border="true"
        :fit="true"
        :stripe="true"
        size="mini"
        align="center"
        ref="table"
        @selection-change="handleSelectionChange">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

        <el-table-column
          prop="id"
          label="商品编号"
          min-width="100"
          align="center">
        </el-table-column>

        <el-table-column
        :showOverflowTooltip="true"
          prop="goods_name"
          label="商品名称"
          min-width="130"
          align="center">
        </el-table-column>

        <el-table-column
        :showOverflowTooltip="true"
          prop="class_name"
          label="商品分类"
          min-width="130"
          align="center">
        </el-table-column>

        <el-table-column
        :showOverflowTooltip="true"
          prop="model"
          label="型号"
          min-width="120"
          align="center">
        </el-table-column>

        <el-table-column
          prop="unit"
          label="单位"
          min-width="120"
          align="center">
        </el-table-column>
      </el-table>

        <el-pagination 
        class="page-count"
        @current-change="search" 
        background 
        layout="total, prev, pager, next" 
        :total="totalCount" 
        :current-page.sync='page' 
        :page-size="10"></el-pagination>
      
      <div class="btn">
        <el-button
        size="mini"
        plain
        type="danger"
        @click="close">取消</el-button>
        <el-button
        size="mini"
        plain
        type="primary"
        @click="confirm">确认</el-button>
      </div>

      <deleteConfirm v-if="showMask" @closeDelete="closeDelete" @deleteConfirm="deleteConfirm"></deleteConfirm>
  </el-card>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, Emit } from 'vue-property-decorator';
import ajaxResquest from '@/api/apiRequest';
import AjaxResquest from '@/api/apiRequest';

@Component({})
export default class ProduceInCreateDetailTable extends Vue {
  tableData: any[] = [];
  categorys: any[] = [];
  category: string = '';
  keyword: string = '';
  totalCount: number = 0;

  categoryRes!: ajaxResquest;
  goodsRes!: ajaxResquest;
  showMask: boolean = false;
  page: number = 1;
  pageSize: number = 10;
  selectVal: any[] = [];
  $refs!: any;
  mounted() {
    this.categoryRes = new AjaxResquest('/goods/getClassList');
    this.goodsRes = new ajaxResquest('/goods/getHandleGoodsInfo');
    this.getCategory();
    this.search();
  }
  getCategory() {
    this.categoryRes.getFunction().then((res: any) => {
      console.log(res.data);
      this.categorys = res.data.data.types;
    });
  }
  search() {
    let data = {
      page: this.page,
      pageSize: this.pageSize,
      classId: this.category,
      keyWord: this.keyword
    };
    this.goodsRes.getFunction(data).then((res: any) => {
      console.log(res.data.data);
      this.totalCount = res.data.data.allCount;
      this.tableData = res.data.data.types;
    });
  }
  handleSelectionChange(val: any) {
    console.log(val);

    this.selectVal = val;
  }
  @Emit()
  close() {}
  confirm() {
    this.$emit('confirm', this.selectVal);
    this.$refs.table.clearSelection();
  }
}
</script>
<style lang="less">
.produce-in-detail-wrap {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  widows: 600px;
  height: 500;
  z-index: 999;
  .search {
    text-align: left;
    margin-bottom: 20px;
    .search-input {
      width: 300px;
      margin: 0 20px 0 20px;
    }
  }
  .page-count {
    margin-top: 10px;
    text-align: right;
  }
  .btn {
    position: absolute;
    left: 20px;
    bottom: 20px;
    // margin-top: 15px;
    // text-align: left;
  }
}
</style>
